<template>
  <NModal v-model:show="buttonVisible" title="按钮权限" :mask-closable="false" transform-origin="center" preset="card" @after-leave="closeDrawer" class="w-800px">
    <NScrollbar class="h-300px pr-20px">
      <NForm ref="formRef" :model="model" label-placement="left" :label-width="100">
        <NGrid responsive="screen" item-responsive>
          <NFormItemGi span="24" label="按钮">
            <NDynamicInput v-model:value="model.buttons" :on-create="handleCreateButton">
              <template #default="{ value }">
                <div class="ml-8px flex-y-center flex-1 gap-12px">
                  <NInput v-model:value="value.title" placeholder="请输入按钮名称" class="flex-1"/>
                  <NInput v-model:value="value.code" placeholder="请输入按钮编码" class="flex-1"/>
                  <NInput v-model:value="value.icon" placeholder="请输入按钮图标" class="flex-1"/>
                </div>
              </template>
              <template #action="{ index, create, remove }">
                <NSpace class="ml-12px">
                  <NButton size="medium" @click="() => create(index)">
                    <icon-ic-round-plus class="text-icon" />
                  </NButton>
                  <NButton size="medium" @click="() => remove(index)">
                    <icon-ic-round-remove class="text-icon" />
                  </NButton>
                </NSpace>
              </template>
            </NDynamicInput>
          </NFormItemGi>
        </NGrid>
      </NForm>
    </NScrollbar>
    <template #footer>
      <NSpace justify="end" :size="16">
        <NButton @click="closeDrawer">取消</NButton>
        <NButton type="primary" @click="handleSubmit">提交</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<script setup lang="tsx">
defineOptions({
  name: 'ResourceButtonModal'
});

import {reactive,watch} from "vue";
import { getButtonList } from '@/service/api/resource-api'
export type OperateType = NaiveUI.TableOperateType;

interface Props {
  // 编辑资源的数据
  rowData?: number;
}
const props = defineProps<Props>();
const buttonVisible = defineModel<boolean>('buttonVisible', {
  default: false
});

interface Emits {
  (e: 'submitButton'): void;
}

const emit = defineEmits<Emits>();

const searchParam:Api.SystemManage.SearchButtonParam={
  searchKey:'',
  parentId:null
}

// 监听打开窗口时，逻辑处理
watch(buttonVisible, () => {
  if (buttonVisible.value) {
    // 清空表单
    Object.assign(model, createDefaultModel());
    if(props.rowData){
      searchParam.parentId = props.rowData
      // 查询菜单
      getButtons()
    }
  }
});

type Model = Pick<Api.SystemManage.ResourceInfo,'parentId'> &{
  buttons: Api.SystemManage.MenuButton[];
}
const model: Model = reactive(createDefaultModel());
function createDefaultModel(): Model {
  return {
    parentId:searchParam.parentId,
    buttons:[]
  }
}

// 查询菜单
async function getButtons(){
  const {data} = await getButtonList(searchParam)
  console.log("data:",data)
  if(data !== null){
    if (Array.isArray(data)) {
      model.buttons = [...model.buttons,...data]
    }
  }
}

// 添加按钮
function handleCreateButton(){
  const buttonItem: Api.SystemManage.MenuButton = {
    id:null,
    parentId:null,
    code: '',
    name: '',
    title: ''
  };
  return buttonItem;
}

// 提交
async function handleSubmit() {
  const params = getSubmitParams();
  console.log('params: ', params);
  // request
  window.$message?.success('操作成功');
  // 取消、关闭弹框
  closeDrawer();
  // 调用父组件事件
  emit('submitButton');
}

function getSubmitParams() {
  const {...params} = model;
  return params;
}

// 取消、关闭弹框
function closeDrawer() {
  buttonVisible.value = false;
}
</script>



<style scoped>

</style>
